<script setup lang="ts">
import Filtrate from '~/components/Filtrate/index.vue'
import ItemFont from '~/components/ItemFont/index.vue'
import APICommon from '~/api/common'

interface Props {
    list: any[];
}

interface Emits {
    (e: 'on-select-change', filter: any, op: any): void;
}
const $props = defineProps<Props>()

const $emit = defineEmits<Emits>()

const columns = ref([{
    placeholder: '类型',
    value: 'font_type',
    item: []
}, {
    placeholder: '风格',
    value: 'font_style',
    item: []
}, {
    placeholder: '语系',
    value: 'language',
    item: []
}, {
    placeholder: '格式',
    value: 'format',
    item: []
}, {
    placeholder: '编码',
    value: 'font_code',
    item: []
}])

function onSelectChange(value: Ref) {
    const filter: any = {}
    const op: any = {}
    for (let item in value.value) {
        filter[item] = JSON.parse(value.value[item]).type
        op[item] = JSON.parse(value.value[item]).op
    }
    $emit('on-select-change', filter, op)
}

function getScreen() {
    APICommon.getScreen('font').then(({ data }) => {
        columns.value[0].item = data.font_type
        columns.value[1].item = data.font_style
        columns.value[2].item = data.language
        columns.value[3].item = data.format
        columns.value[4].item = data.font_code
    })
} getScreen()

</script>

<template>
    <div class="font-list">
        <Filtrate :columns="columns" @onSelectChange="onSelectChange" />
        <el-empty class="empty" description="暂无内容" v-if="list.length == 0" :image-size="82" />
        <ItemFont v-for="item in list" :key="item" :item="item" />
    </div>
</template>

<style lang="less" scoped></style>